<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模仿input中的placeholder属性特点</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #inp{
            position: absolute;
            left: 0;
            top: 0;
            background-color: transparent;
        }

        span{
            position: absolute;
            left: 0;
            top: 0;
            color: #999;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <!-- <input type="text" placeholder="请输入您的姓名"> -->
    <br/>
    <input type="text" id="inp" maxlength="15">
    <span id="sp">请输入您的姓名</span>
    <div id="d">15</div>
</body>
<script>
    let inp = document.querySelector("#inp")
    let sp = document.querySelector("#sp")
    let d = document.querySelector("#d")

    //键盘按下
    inp.onkeydown = function(){
        let len = inp.value.length
        if(len>0){
            sp.style.display = "none"
            d.innerText=15-len
        }else{
            sp.style.display = "inline"
            d.innerText=15
        }
    }

    //键盘抬起
    inp.onkeyup = function(){
        let len = inp.value.length
        if(len>0){
            sp.style.display = "none"
            d.innerText=15-len
        }else{
            sp.style.display = "inline"
            d.innerText=15
        }
    }

</script>
</html>